<template>
  <div>

    <div class="upmain">
         

      <el-form :model="nvideo" name="nvideo" ref="nvideo" label-width="100px" class="demo-ruleForm" method="post"
        enctype="multipart/form-data">
        <el-form-item label="视频名称">
          <el-input v-model="nvideo.vname"></el-input>
        </el-form-item>
        <el-form-item label="视频分类">
          <select class="form-control" id="exampleInputAddress7" v-model="nvideo.tid"> 
            <option v-for="(type,index) in types" :key="index" :value="index+1">{{type.tname}}</option>
          </select>
        </el-form-item>
        <el-form-item label="视频简介">
          <el-input v-model="nvideo.vintroduce"></el-input>
        </el-form-item>
        <el-form-item label="视频演员">
          <el-input v-model="nvideo.vactor"></el-input>
        </el-form-item>
        
        <el-form-item label="请上传视频">
          <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange">
        </el-upload>
            <el-button type="success" @click="submitUpload">上传到服务器</el-button>
        </el-form-item>
        
        <el-form-item>
          <el-button onclick="nvideo.reset();"> 重置</el-button>
          <el-button @click="login()">提交</el-button><br>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        nvideo: {
          vuid: "",
          vname: '',
          tid: '',
          vintroduce: '',
          vactor: '',
          region: '',
          vaddr: '',
        },
        simg: "",
        types: [],
        fileList: [],
      
      };
    },
    methods: {
      login() {
        console.log( this.nvideo.vname);
        this.$axios.post('addvideo.do?vuid=' + this.nvideo.vuid + '&vname=' + this.nvideo.vname + '&tid=' + this.nvideo.tid 
        + '&vintroduce=' + this.nvideo.vintroduce + '&vactor=' + this.nvideo.vactor + '&vaddr=' + this.nvideo.vaddr).then(

          response => {
            this.flag = response.data;
            if (this.flag > 0) {
              alert("发布视频成功")
            } else {
              alert("发布视频失败")
            }
          }
        )
      },

 /*重新选择的时候清楚原来的文件*/
            delFile() {
                this.fileList = [];
            },
            /*文件状态改变时的钩子函数*/
            handleChange(file, fileList) { //该方法很重要,从你选择的fileList文件赋值给你定义的this.fileList
                this.fileList = fileList;
            },
            /*单击上传到服务器(提交)按钮*/
            submitUpload() {
                let formData = new FormData(); //文件转换
                //fileList 对应你服务器接受名称
                formData.append("fileList", this.fileList[0].raw);
                //这边"$http"我重新封装了axios,你可以改成自己的.但是必须是post来请求,
                //http://localhost:8082/yiban_zlj/fileUpload改成你服务器文件上传的API地址
                //formData请求带的数据
                //{"Content-Type": "multipart/form-data;charset=utf-8"}是文件上传必须要的
                //最后可以打印返回的服务器返回的数据,如果控制台报错接受你哪里没有写对
                this.$axios.post('vaddrfileUpload.do', formData, {
                    "Content-Type": "multipart/form-data;charset=utf-8"
                }).then(res => {
                    this.nvideo.vaddr=res.data;
                    alert("上传成功")
                    console.log(res)
                })
            }
        



    },
    mounted() {
      this.nvideo.vuid = window.localStorage.getItem('uid');
      this.$axios.get('typeList.do').then(response => {
        this.types = response.data
        console.log(this.types);
      }).catch(function (error) {
        console.log(error);
      })

    },
    components: {},
  }
</script>

<style scoped>
  .upmain {
    margin: 100px auto;
    width: 50%;
  }

  .upmain img {
    border: 3px dashed #ccc;
    display: block;
    border-radius: 25px;
    margin: 5px auto;
  }
</style>